    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择水果</title>
    </head>
    <style>
        #right,#left{
            height: 200px;
            width: 100px;
            border: 1px solid #0d4ee2;
        }
    </style>
    <script src="../jquery-3.4.1.js"></script>
    <script>
        window.onload=function () {
            $('button').eq(0).click(function () {
                        // alert(1)
                $('#right').append($("#left option"))
            })
            $('button').eq(1).click(function () {
                // alert(1)
                $('#left').append($("#right option"))
            })
            $('button').eq(2).click(function () {
                // alert(1)
                $('#left').append($("#right option:selected"))
            })
            $('button').eq(3).click(function () {
                // alert(1)
                $('#right').append($("#left option:selected"))
            })
        }
    </script>
    <body>
    <select name="" id="left" multiple>
        <option value="">苹果</option>
        <option value="">香蕉</option>
        <option value="">菠萝</option>
        <option value="">橘子</option>
    </select>
    <button>>>></button>
    <button><<<</button>
    <button><</button>
    <button>></button>
    <select name="" id="right" multiple></select>
    </body>
    </html>